<template>
  <div>
    <ul class="articles-list" style="overflow:auto">
      <li
        v-for="(article) in articleList"
        :key="article.articleId"
        class="item"
        @click="handelRead(article.articleId)"
      >
        <a href="#">
          <img
            class="wrap-img img-blur-done"
            :src="getImageSrc(article.thumbnail)"
            data-has-lazy-src="false"
          >
          <div class="content">
            <h4 class="title" v-html="article.title" />
            <p v-if="article.tags" class="abstract">
              <el-tag
                v-for="tag_ in article.tags.split(',')"
                :key="tag_"
                :disable-transitions="false"
                type="info"
              >
                {{ tag_ }}
              </el-tag>
            </p>
            <p class="abstract">{{ article.summary }}</p>
            <div class="meta">
              <span>查看 {{ article.views }}</span>
              <span>评论 {{ article.comments }}</span>
              <span>收藏 {{ article.favors }}</span>
              <span>作者: {{ article.user.userName }}</span>
              <span v-if="article.createTime" class="time">
                发布时间：{{ getTime(article.createTime) }}
              </span>
              <span v-if="user.userId!==article.createBy"><el-button type="text" @click="openCenter(article.createBy)">查看作者主页</el-button></span>
              <span v-if="user.userId===article.createBy"><el-button type="text" @click="handleEdit(article.articleId)">编辑</el-button></span>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <div v-if="loading" class="loading">
      <img src="../../assets/loading.svg" alt="拼命加载中...">
    </div>
    <div v-if="nomore && queryParam.total<1" class="load-end">~没有查到数据~</div>
    <pagination v-show="queryParam.total>0" :total="queryParam.total" :page.sync="queryParam.current_page" :limit.sync="queryParam.page_length" @pagination="queryData" />
    <arrow-up ref="arrow_up" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import ArrowUp from '@/components/ArrowUp'

export default {
  name: 'ArticleList',
  components: { Pagination, ArrowUp },
  props: {
    classify: {
      type: String,
      default: undefined
    },
    tag: {
      type: String,
      default: undefined
    },
    keyword: {
      type: String,
      default: undefined
    },
    author: {
      type: String,
      default: undefined
    },
    watcher: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      articleList: [],
      queryParam: {
        channel: undefined,
        tag: undefined,
        author: undefined,
        watcher: undefined,
        current_page: 1,
        page_length: 20,
        total: 0
      },
      loading: false,
      nomore: false,
      doSearch: false,
      afterDocId: undefined
    }
  },
  computed: {
    ...mapState({
      user: state => state.user.info
    })
  },
  watch: {
    classify: {
      handler(classify) {
        if (classify) {
          this.queryParam.channel = classify
        } else {
          this.queryParam.channel = undefined
        }
        this.articleList = []
        this.queryParam.tag = undefined
        this.afterDocId = null
        this.queryParam.current_page = 1
        this.nomore = false
        this.doSearch = false
        this.queryData()
      }
    },
    tag: {
      handler(tag) {
        this.articleList = []
        this.queryParam.tag = tag
        this.afterDocId = null
        this.queryParam.current_page = 1
        this.nomore = false
        this.doSearch = false
        this.queryData()
      }
    },
    keyword: {
      handler(keyword) {
        this.keyword = keyword
        this.afterDocId = null
        this.queryParam.current_page = 1
        this.nomore = false
        this.doSearch = true
        this.articleList = []
        this.queryData()
      }
    },
    author: {
      handler(author) {
        this.queryParam.author = author
        this.afterDocId = null
        this.queryParam.current_page = 1
        this.nomore = false
        this.doSearch = false
        this.articleList = []
        this.queryData()
      }
    },
    watcher: {
      handler(watcher) {
        this.queryParam.watcher = watcher
        this.afterDocId = null
        this.queryParam.current_page = 1
        this.nomore = false
        this.doSearch = false
        this.articleList = []
        this.queryData()
      }
    }
  },
  mounted() {
    this.queryData()
  },
  methods: {
    getTime: function(value) {
      return this.$api.diffDateBefore(value)
    },
    getImageSrc(thumbnail) {
      return this.$api.getImageSrc(thumbnail)
    },
    queryData() {
      this.loading = true
      this.articleList = []
      if (this.doSearch) {
        if (!this.keyword) {
          this.nomore = true
          this.queryParam.total = 0
          this.loading = false
          return
        }
        this.$http.get('/blog/query/article/search/' + encodeURI(this.keyword), {
          params: {
            current_page: this.queryParam.current_page,
            page_length: this.queryParam.page_length,
            afterDocId: this.afterDocId
          }
        }).then(response => {
          this.articleList = response.param.data
          this.afterDocId = response.param.extraInfo
          this.queryParam.total = response.param.recordsTotal
          this.caluQueryParam(response.param.recordsTotal)
          this.loading = false
          this.topFunction()
        }).catch(e => {
          this.loading = false
        })
      } else {
        this.$http.get('/blog/query/article', {
          params: this.queryParam
        }).then(response => {
          this.articleList = response.param.data
          this.queryParam.total = response.param.recordsTotal
          this.caluQueryParam(response.param.recordsTotal)
          this.loading = false
          this.topFunction()
        }).catch(e => {
          this.loading = false
        })
      }
    },
    caluQueryParam(recordsTotal) {
      const total = this.queryParam.current_page * this.queryParam.page_length
      if (total >= recordsTotal) {
        this.nomore = true
      }
    },
    openCenter(createBy) {
      this.$emit('openCenter', createBy)
    },
    handelRead(articleId) {
      this.$emit('read', articleId)
    },
    handleEdit(articleId) {
      this.$emit('edit', articleId)
    },
    topFunction() {
      this.$refs.arrow_up.topFunction()
    }
  }
}
</script>

<style lang="less" scoped>
.articles-list {
    margin: 0;
    padding: 0;
    margin-right: 10px;
    list-style: none;
    .title {
        color: #333;
        margin: 7px 0 4px;
        display: inherit;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5;
        cursor: pointer;
    }
    .item > div {
        padding-right: 140px;
    }
    .item .wrap-img {
        position: absolute;
        top: 50%;
        margin-top: -50px;
        right: 0;
        width: 125px;
        height: 100px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          border: 1px solid #f0f0f0;
        }
    }
    li {
        line-height: 20px;
        position: relative;
        // width: 100%;
        padding: 15px 0px;
        padding-right: 150px;
        border-bottom: 1px solid #f0f0f0;
        word-wrap: break-word;
        &:hover {
        .title {
            color: #000;
        }
        }
        a {
          cursor: default;
        }
        .abstract {
          min-height: 30px;
          margin: 0 0 8px;
          font-size: 13px;
          line-height: 24px;
          color: #555;
        }
        .meta {
          padding-right: 0 !important;
          font-size: 12px;
          font-weight: 400;
          line-height: 20px;
          a {
              margin-right: 10px;
              color: #b4b4b4;
              &::hover {
              transition: 0.1s ease-in;
              -webkit-transition: 0.1s ease-in;
              -moz-transition: 0.1s ease-in;
              -o-transition: 0.1s ease-in;
              -ms-transition: 0.1s ease-in;
              }
          }
          span {
              margin-right: 10px;
              color: #666;
          }
        }
    }
}

.loading {
  text-align: center;
  padding: 30px;
}

.load-end {
  text-align: center;
  padding: 30px;
}
</style>
